# jQuery Event Methods

« Previous
Next Chapter »

jQuery is tailor-made to respond to events in an HTML page.

## What are Events?

All the different visitor's actions that a web page can respond to are called events.

An event represents the precise moment when something happens.

Examples:

- moving a mouse over an element
- selecting a radio button
- clicking on an element

The term "fires" is often used with events. Example: "The keypress event fires the moment you press a key".

Here are some common DOM events:

Mouse Events | Keyboard Events | Form Events | Document/Window Events
--- | --- | --- | ---
click | keypress | submit | load
dblclick | keydown | change | resize
mouseenter | keyup | focus | scroll
mouseleave |  | blur | unload

## jQuery Syntax For Event Methods

In jQuery, most DOM events have an equivalent jQuery method.

To assign a click event to all paragraphs on a page, you can do this:

$("p").click();

The next step is to define what should happen when the event fires. You must pass a function to the event:

$("p").click(function(){
// action goes here!!
});

## Commonly Used jQuery Event Methods

$(document).ready()

The $(document).ready() method allows us to execute a function when the document is fully loaded. This event is already explained in the jQuery Syntax chapter.

click()

The click() method attaches an event handler function to an HTML element.

The function is executed when the user clicks on the HTML element.

The following example says: When a click event fires on a <p> element; hide the current <p> element:

## Example

$("p").click(function(){
$(this).hide();
});
Try it yourself »

dblclick()

The dblclick() method attaches an event handler function to an HTML element.

The function is executed when the user double-clicks on the HTML element:

## Example

$("p").dblclick(function(){
$(this).hide();
});
Try it yourself »

mouseenter()

The mouseenter() method attaches an event handler function to an HTML element.

The function is executed when the mouse pointer enters the HTML element:

## Example

$("#p1").mouseenter(function(){
alert("You entered p1!");
});
Try it yourself »

mouseleave()

The mouseleave() method attaches an event handler function to an HTML element.

The function is executed when the mouse pointer leaves the HTML element:

## Example

$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
Try it yourself »

mousedown()

The mousedown() method attaches an event handler function to an HTML element.

The function is executed, when the left mouse button is pressed down, while the mouse is over the HTML element:

## Example

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
Try it yourself »

mouseup()

The mouseup() method attaches an event handler function to an HTML element.

The function is executed, when the left mouse button is released, while the mouse is over the HTML element:

## Example

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
Try it yourself »

hover()

The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.

The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element:

## Example

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
Try it yourself »

focus()

The focus() method attaches an event handler function to an HTML form field.

The function is executed when the form field gets focus:

## Example

$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
Try it yourself »

blur()

The blur() method attaches an event handler function to an HTML form field.

The function is executed when the form field loses focus:

## Example

$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
Try it yourself »

## jQuery Event Methods

For a full jQuery event reference, please go to our jQuery Events Reference.

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples